<script setup lang="ts">
import { ref, computed, defineEmits } from 'vue'
import { deleteOrder, cancel, confirm, cancelRefund } from '@/api/order'
import type { Order } from '@/api/order/type'
import type { BaseResponse } from '@/api/base'
import { getStatusText, imageStyle } from './common';
import { toast } from '@/utils/common';

defineProps({
  orderList: {
    type: Array,
    default: () => []
  },
  showBuyer: {
    type: Boolean,
    default: false
  }
})
const popup = ref()
const current = ref<Order>()

const emit = defineEmits([
  'refresh'
])

const jumpToDetail = (item: Order) => {
  uni.navigateTo({
    url: `/pages/order/detail?orderNo=${item?.orderNo}`
  })
}
const grayCustomStyle = computed(() => {
  return {
    color: '#000',
    backgroundColor: '#eee',
    height: '50rpx',
    fontSize: '28rpx',
    border: 'none'
  }
})
const mainCustomStyle = computed(() => {
  return {
    color: '#fff',
    backgroundColor: '#ff7744',
    height: '50rpx',
    fontSize: '28rpx',
    border: 'none'
  }
})
const deleteItem = (orderNo: string) => {
  uni.showModal({
    title: '提示',
    content: '确认删除订单吗？',
    success: async (res: any) => {
      if (res.confirm) {
        try {
          const res = await deleteOrder(orderNo)
          toast(res.tips)
          //发消息通知父组件刷新页面
          emit('refresh')
        } catch (error) {
          toast(res.tips)
        }
      }
    }
  })
}
const cancelItem = (orderNo: string) => {
  uni.showModal({
    title: '提示',
    content: '确认取消订单吗？',
    success: async (res: any) => {
      if (res.confirm) {
        try {
          const res = await cancel(orderNo)
          toast(res.tips)
          //发消息通知父组件刷新页面
          emit('refresh')
        } catch (error) {
          toast(res.tips)
        }
      }
    }
  })
}
const jumpToPay = (orderNo: string) => {
  uni.navigateTo({
    url: `/pages/pay/index?orderNo=${orderNo}`
  })
}
const showPop = (order: Order) => {
  popup.value?.open()
  current.value = order
}
const confirmReceive = async () => {
  try {
    const res: BaseResponse = await confirm(current.value.orderNo)
    toast(res.tips)
    popup.value?.close()
    emit('refresh')
  } catch (error) {
    toast(error.tips)
  }
}
const cancelRefundApply = (orderNo: string) => {
  uni.showModal({
    title: '提示',
    content: '确认取消退款吗？',
    success: async (res: any) => {
      if (res.confirm) {
        try {
          const res = await cancelRefund(orderNo)
          toast(res.tips)
          emit('refresh')
        } catch (error) {
          toast(res.tips)
        }
      }
    }
  })
}

</script>

<template>
  <view class="order-buyer" v-show="showBuyer">
    <uv-empty mode="order" v-if="!orderList || orderList.length <= 0"></uv-empty>
    <view class="order-list" v-else>
      <view class="order-item" v-for="(item, index) in orderList" :key="index">
        <view class="order-item-top">
          <view class="order-item-top-name">{{ item?.sellerName }}</view>
          <view class="order-item-top-status">{{ getStatusText(item?.status, item?.payStatus) }}</view>
        </view>
        <view class="order-item-mid" @click="jumpToDetail(item)">
          <view style="display: flex;">
            <view class="order-item-mid-image">
              <my-image :src="item?.goodsPic?.split(',')[0]" :customStyle="imageStyle" mode="aspectFit" />
            </view>
            <view class="order-item-mid-name">
              <uv-text :text="item?.goodsName" :lines="2" size="28rpx"></uv-text>
            </view>
          </view>
          <view class="mid-right">
            <view class="order-item-mid-price">
              <uv-text mode="price" :text="item?.goodsPrice" size="28rpx"></uv-text>
            </view>
            <view class="order-item-mid-num">x1</view>
          </view>
        </view>
        <view class="order-item-bottom">
          <view class="order-item-bottom-name">实付款</view>
          <view class="order-item-bottom-price">
            <uv-text mode="price" :text="item?.goodsPrice" size="28rpx"></uv-text>
          </view>
        </view>
        <view class="order-item-option">
          <view><uv-button text="删除订单" :custom-style="grayCustomStyle"
              v-if="item?.status === 3 || item?.status === 4 || item?.status === 6"
              @click="deleteItem(item?.orderNo)"></uv-button>
          </view>
          <view> <uv-button text="取消订单" :custom-style="grayCustomStyle"
              v-if="item?.status === 0 && item?.payStatus === 0" @click="cancelItem(item?.orderNo)"></uv-button></view>
          <view><uv-button text="继续付款" :custom-style="mainCustomStyle"
              v-if="item?.payStatus === 0 && item?.status === 0" @click="jumpToPay(item?.orderNo)"></uv-button></view>
          <view> <uv-button text="确认收货" :custom-style="mainCustomStyle"
              v-if="item?.payStatus === 1 && item?.status === 2" @click="showPop(item)"></uv-button></view>
          <view><uv-button v-if="item?.status === 5" text="取消退款" color="#eee" :custom-style="mainCustomStyle"
              @click="cancelRefundApply(item)"></uv-button></view>
        </view>
      </view>
    </view>
    <uv-popup class="popup" ref="popup" mode="bottom" :closeable="true">
      <view class="popup-title">确认收到货了吗</view>
      <view class="popup-content">
        <uv-image :src="current?.goodsPic" mode="widthFix" :width="80"></uv-image>
        <view>为保证你的权益，请收到货品检查无误后再确认收货</view>
      </view>
      <view class="popup-btn">
        <uv-button color="#ff7744" text="确定" @click="confirmReceive"></uv-button>
      </view>
    </uv-popup>
  </view>
</template>

<style lang="scss" scoped>
.order-buyer {
  .uv-empty {
    margin-top: 60% !important;
  }

  .order-list {

    .order-item {
      padding: 20rpx;
      background-color: #fff;
      margin-bottom: 20rpx;

      .order-item-top {
        display: flex;
        margin-bottom: 10rpx;
        justify-content: space-between;

        .order-item-top-status {
          color: #ff7744;
        }
      }

      .order-item-mid {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;

        .order-item-mid-image {
          margin-right: 10rpx;
        }

        .mid-right {
          display: flex;
          align-items: end;
          flex-direction: column;
          justify-content: space-between;

          .order-item-mid-price {
            font-size: 28rpx;
          }

          .order-item-mid-num {
            font-size: 24rpx;
            color: #999;
            margin-left: calc(100% - 20rpx);
          }
        }
      }

      .order-item-bottom {
        display: flex;
        justify-content: flex-end;
        align-items: end;
        margin-bottom: 15rpx;

        .order-item-bottom-name {
          font-size: 24rpx;
        }

        .order-item-bottom-price {
          font-size: 28rpx;
        }
      }

      .order-item-option {
        display: flex;
        justify-content: flex-end;

        .uv-button-wrapper {
          margin-left: 10rpx;
        }
      }
    }
  }

  .popup {
    .popup-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 40rpx;
      margin-top: 30rpx;
      text-align: center;
    }

    .popup-content {
      display: flex;
      width: 400rpx;
      margin: 20rpx auto;
      flex-direction: column;
      color: #636161;
      font-size: 24rpx;
      text-align: center;
      align-items: center;

      :first-child {
        margin-bottom: 10rpx;
      }
    }

    .popup-btn {
      width: 90%;
      margin: 10% auto;
      margin-bottom: 80rpx;
    }
  }
}
</style>
